import { cn } from "@/libs/tailwind"
import React from "react"

interface IconComponentProps {
  icon: React.ReactElement
  onClick?: () => void
  ariaLabel?: string
}

const IconComponent: React.FC<IconComponentProps> = ({
  icon,
  onClick,
  ariaLabel = "拓展功能",
}) => {
  const buttonClasses = cn(
    // 布局
    "size-12",
    "flex items-center justify-center",
    "rounded-full",

    // 颜色
    "bg-white text-gray-500",
    "hover:text-black",
    "active:bg-gray-100",

    // 效果 & 状态
    "shadow-sm",
    "cursor-pointer",
    "transition-all duration-200",
    "active:scale-95"
    //   "focus:outline-none focus:ring-2 focus:ring-blue-500"
  )

  return (
    <button
      type="button"
      aria-label={ariaLabel}
      className={buttonClasses}
      onClick={onClick}
    >
      {icon}
    </button>
  )
}

export default IconComponent
